<template>
	<!-- 空白页 -->
	<view v-if="!hasLogin || empty===true" class="empty">
		<!-- 1. 未登录或者购物车为空-都显示图片 -->
		<image src="@/static/emptyCart.jpg" mode="aspectFit"></image>
		
		<!-- 2. 登录-但购物车为空 -->
		<view v-if="hasLogin" class="empty-tips">
			空空如也
			<navigator class="navigator" v-if="hasLogin" url="/pages/index/index" open-type="reLaunch">随便逛逛></navigator>
		</view>
		<!-- 2. 未登录 -->
		<view v-else class="empty-tips">
			空空如也
			<navigator class="navigator" url="/pages/public/login" open-type="navigate">去登陆></navigator>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-number-box',
		props: {
			hasLogin: {
				type: Boolean,
				required: true
			},
			empty: {
				type: Boolean,
				required: true
			}
		}
	}
</script>

<style lang="scss">
	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm+2upx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}
</style>
